<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .load-more {
            background-color: #cccccc;
            text-align: center;
            cursor: pointer;
            padding: 5px 0;
        }
    </style>
    <script src="../libs/jquery3_1_1.min.js"></script>
</head>
<body>
<input type="hidden" id="dateType" value="10">
<div id="content"></div>
<div class="load-more">加载更多</div>
</body>
</html>

<script>
    $(function () {
        var type = $('#dateType').val();
        var data = null;
        var Page_No = 1;
        var Page_Size = 1;
        $('<s' + 'cript src="articleInfo' + type + '.js?v=' + new Date().getTime() + '" type="text/javascript"></s' + 'cript>').appendTo($(document.body));
        switch (type) {
            case '10':
                data = jsonData10.articleInfo10.item10;
                break;
        }
        loadMore();

        $('.load-more').on('click', loadMore);

        // 加载更多
        function loadMore() {
            var newData = getData(Page_No, Page_Size);
            notifyDataChange(newData);
            if (newData.length >= Page_Size) {
                Page_No++;
            } else {
                // 说明没有更多的数据了  隐藏加载更多
                $('.load-more').hide();
                console.log('没有更多数据了');
            }
        }

        //刷新视图方法
        function notifyDataChange(array) {
            for (var i = 0; i < array.length; i++) {
                $('#content').append($('<h3><p>' + JSON.stringify(array[i]) + '</p></h3>'));
            }
        }

        function getData(pageNo, pageSize) {
            return data.slice((pageNo - 1) * pageSize, pageNo * pageSize);
        }


    });
</script>